<template>
	<!-- <view class="form"> -->
	<view class="formINFOS">
		<u--form :model="formModel" :labelPosition="'top'" ref="form1" label-width="200rpx">
			<u-form-item label="作业名称" prop="作业名称" borderBottom>
				<u--input v-model="formModel.作业名称" placeholder="输入作业名称" border="none">
				</u--input>
			</u-form-item>
			<u-form-item label="作业区域" prop="作业区域" borderBottom @click="show=true;">
				<u--input v-model="formModel.作业区域" placeholder="输入作业区域" border="none" disabled disabledColor="#ffffff">
				</u--input>
				<u-icon slot="right" name="arrow-right"></u-icon>
			</u-form-item>
			<user-pick :label="'监护人'" :multiple="false" :title="'监护人'" :placeholder="'请选择监火人'" v-model="formModel.监护人"
				:prop="'jhr'"></user-pick>
			<user-pick :label="'验收人'" :multiple="false" :title="'验收人'" :placeholder="'请选择验收人'" v-model="formModel.验收人"
				:prop="'ysr'"></user-pick>
			<u-action-sheet :show="show" :actions="qywzOptions" title="作业区域" @close="show = false" @select="sexSelect">
			</u-action-sheet>
		</u--form>
		<base-form v-model="formModel" label-width="100%" :labelPosition="'top'" :formList="formList"
			:btnMessage="btnMessage" @submit="submit">
			<!-- <view slot="testSlot"> 这里可以是一个未定义的组件 </view>
			  <view slot="testSlot1"> 这里可以是一个未定义的组件1 </view> -->
		</base-form>

	</view>
	<!-- </view> -->
</template>

<script>
	import userPick from "@/pages/Components/userPick";
	import deptPick from "@/pages/Components/department";
  import Vue from 'vue'
	import {
		workHeaderAPI,
		getData,
		code
	} from "../../../api/public.js";
	import {
		URL
	} from "../../../api/request.js";
	import {
		zyqy
	} from "../../../api/api.js";
	export default {
		props: ["type"],
		components: {
			userPick,
			deptPick,
		},
		data() {
			return {
				// type: 1,
				companyId: null,
				formList: [],
				formModel: {
					作业名称: '',
					验收人: '',
					监护人: '',
					作业区域: ''
				},
				isShow: 1,
				btnMessage: {
					state: false,
					cancels: "上一步",
					submit: "下一步",
				},
				options1: [],
				value: "",
				model1: {
					name: "",
				},
				men: [],
				dataUrl: null,
				data2: {},
				show: false,
				qywzOptions: []
			};
		},
		onShow() {
			this.companyId = uni.getStorageSync("companyId");
		},
		mounted() {
			this.init();
			this.getZyqy()
		},
		methods: {
			async init() {
				const data = await workHeaderAPI(this.type, code);
				if (data.code === 200) {
					if (data.data == null) {
						this.formList = data.data;
					} else {
						let formList = JSON.parse(data.data.jsonwbnr);
						let ary = [];
						let obj = {
							4: "userPicker",
							5: "deptPicker",
							1: "picker",
						};

						function getPromise(value) {
							return new Promise((resolve, reject) => {
								setTimeout(() => {
									resolve(value);
								}, 1000);
							});
						}
						const res = formList.map(async (ele) => {
							let arr;
							if (ele.tagIcon === "select" && ele.dataUrl) {
								this.dataUrl = URL + "/" + ele.dataUrl;
								this.data2 = {
									pageNum: 1,
									pageSize: 10,
								};
								const list = await getData(`/${ele.dataUrl}`, this.data2);
								arr = list.data.list.map((item) => {
									return {
										label: item[ele.keyName],
										value: item.id,
									};
								});
							}
							if (ele.type !== "userPicker") {
								ary.push({
									type: ele.tagIcon === "select" ?
										obj[ele.selectMode] : ele.tagIcon === "date" ?
										"datetime" : ele.tagIcon,
									label: ele.label,
									model: ele.label,
									// model: ele.vModel,
									borderBottom: ele.clearable,
									multiple: ele.multiple,
									disabled: ele.disabled,
									placeholder: ele.placeholder,
									columns: arr ? [arr] : [ele.options],
									url: URL + "/common/upload",
									show: false,
								});
							}
						});
						this.formList = ary;
						this.formList.forEach((e) => {
							if (e.type === "userPicker") {
								this.men.push(e.model)
							}
              Vue.set(this.formModel, e.model, "")
						})
					}
				}
			},
			submit() {

				let arr = []
        console.log(this.formModel);

        for (const key in this.formModel) {
					arr.push({
						value: this.formModel[key],
						name: key
					})
				}

				this.$emit("submit", {
					params: arr,
					// list:arr
				});
			},
			sexSelect(e) {
				this.formModel.作业区域 = e.name
				this.formModel.zyqy = e.value
			},
			// 作业区域
			getZyqy() {
				zyqy({}).then((res) => {
					let array = []
					res.data.forEach(element => {
						array.push({
							name: element.qymc,
							value: element.id
						})
					});
					this.qywzOptions = array
				})
			}
		},
	};
</script>

<style lang="scss">
	.form {
		overflow: hidden;
		background: #f6f6f6;
		// padding: 60rpx 30rpx;

		.formINFOS {
			width: 100%;
			// height: calc(100vh - 10rpx);
			box-sizing: border-box;
			// padding: 0 25rpx;
			border-radius: 8px;
			background: #fff;
		}

		.identification {
			width: 100%;
			height: 1220rpx;
			background-color: #fff;
			border-radius: 16rpx;
			padding: 0 25rpx;
			box-sizing: border-box;

			.title {
				width: 100%;
				height: 90rpx;
				background-color: skyblue;
				// margin: auto 0;
				display: flex;

				.left {
					width: 200rpx;
				}

				.right {
					flex: 1;
				}
			}

			.content {
				width: 100%;
				height: 1018rpx;
				background-color: #f6f6f6;
			}
		}
	}
</style>
